<template>
  <div>
    <div class="center-container">
      <PersonHead :tabs="tabs" @tabClick="handleTabClick" :isSelect="true" @selectClick="handleSelectChange" />
      <LoadingNodata :loading="loading" :data="currentTabData">
        <component :is="currentTabComp" :tabData="currentTabData" />
      </LoadingNodata>
    </div>
    <div class="pagination" v-if="!paginationHideList.includes('personData')">
      <Pagination
        :current-page="queryParams.page" 
        :page-size="queryParams.rows" 
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, unref } from "vue";
import PersonHead from "@/components/PersonHead";
import Pagination from "@/components/Pagination";
import LoadingNodata from "@/components/LoadingNodata";
import PersonDataComp from "./PersonData";
import PracticeRecordComp from "./PracticeRecord";
import WrongRecord from "./WrongRecord";
import MockRecord from "./MockRecord";
import CollectRecord from "./CollectRecord";
import NoteRecord from "./NoteRecord";
import AskRecord from "./AskRecord";
// 导入数据
import { myPracticeRecord, myWrongRecord, myCollectRecord, myNoteRecord, myAskRecord } from "@/service/personalCenter";
// import LearningCenter from "./LearningCenter";
const currentTabComp = ref("PersonDataComp");
const keys = ["personData"];
const paginationHideList = ref([]);
const currentTabData = ref(null);
const loading = ref(false);
const tabDataCache = ref({});
const total = ref(0);
// 添加当前类型和总数的响应式变量
const currentType = ref('personData');

// 分页和筛选参数
const queryParams = ref({
  subject: 1, // 0其他，1.GMAT, 2.GRE, 3.EA
  page: 1,
  rows: 10
});

const tabs = ref([
  {
    label: "个人数据",
    type: "personData",
  },
  {
    label: "做题记录",
    type: "practiceRecord",
  },
  {
    label: "错题记录",
    type: "wrongRecord",
  },
  {
    label: "模考记录",
    type: "mockRecord",
  },
  {
    label: "收藏试题",
    type: "collectRecord",
  },
  {
    label: "我的笔记",
    type: "noteRecord",
  },
  {
    label: "我的提问",
    type: "askRecord",
  },
  {
    label: "基础测试记录",
    type: "baseTestRecord",
  },
]);

const componentKeys = {
  personData: PersonDataComp,
  practiceRecord: PracticeRecordComp,
  wrongRecord: WrongRecord,
  mockRecord: MockRecord,
  collectRecord: CollectRecord,
  noteRecord: NoteRecord,
  askRecord: AskRecord,
};

// 初始加载默认tab的数据
onMounted(async () => {
  const defaultType = 'personData';
  await fetchTabData(defaultType);
});


// 根据类型获取对应数据的函数
const fetchTabData = async (type) => {
  console.log("type :>> ", type);
  loading.value = true;
  try {
    // 如果已经有缓存数据，直接使用缓存
    // if (tabDataCache.value[type]) {
    //   currentTabData.value = tabDataCache.value[type];
    //   return;
    // }
    
    // 统一准备请求参数
    const params = {
      subject: unref(queryParams).subject,
      page: unref(queryParams).page,
      rows: unref(queryParams).rows
    };
    
    // 根据不同的type调用不同的接口
    let result;
    
    switch (type) {
      case 'personData':
        // 调用个人数据接口
        // result = await apiService.getPersonData();
        result = { /* 模拟数据 */ };
        break;
      case 'practiceRecord':
        // 调用做题记录接口
        result = await myPracticeRecord(params);
        break;
      case 'wrongRecord':
        // 调用错题记录接口
        result = await myWrongRecord(params);
        break;
      case 'collectRecord':
        // 调用收藏记录接口
        result = await myCollectRecord(params);
        break;
      case 'noteRecord':
        // 调用笔记记录接口
        result = await myNoteRecord(params);
        break;
      case 'askRecord':
        // 调用提问记录接口
        result = await myAskRecord(params);
        break;
      // ... 其他类型的数据请求
      default:
        result = {};
    }
    
    console.log("result :>> ", result);
    // 更新当前数据和缓存
    currentTabData.value = result.data.result;
    // tabDataCache.value[type] = result.data.result;
    total.value = result.data.totalCount;
  } catch (error) {
    currentTabData.value = null;
  } finally {
    loading.value = false;
  }
};

// 重新加载数据（分页或筛选条件变化时调用）
const reloadData = async (newParams) => {
  // 更新查询参数
  if (newParams) {
    queryParams.value = { ...queryParams.value, ...newParams };
  }
  
  // 重新获取数据
  await fetchTabData(currentType.value);
};

const handleTabClick = async ({ item: { type } }) => {
  paginationHideList.value = [type];
  currentType.value = type;
  currentTabComp.value = componentKeys[type] || PersonDataComp;
  // 清空当前数据，显示加载状态
  currentTabData.value = null;
  // 重置分页到第一页
  queryParams.value.page = 1;
  // 请求并更新数据
  await fetchTabData(type);
};

// 处理页码变化
const handleCurrentChange = (page) => {
  reloadData({ page });
};

// 处理每页条数变化
const handleSizeChange = (size) => {
  reloadData({ page: 1, rows: size });
};

// 处理select点击
const handleSelectChange = (value) => {
  queryParams.value.subject = value;
  queryParams.value.page = 1;
  reloadData();
}
</script>

<style scoped lang="scss">
.center-container {
}
.pagination {
  margin-bottom: 15px !important;
}
</style>
